<template>
  <el-container class="layout">
    <el-aside class="aside" width="200px">
      <!-- <img class="logo" src="@/assets/imgs/logo-myzx-text.png" alt=""> -->
      <h1 class="logo-text">名医在线</h1>
      <MenuView />
    </el-aside>
    <el-container>
      <el-header>
        <div class="action-top">

          <el-space>
            <el-switch @change="themeToggle" style="--el-switch-off-color:#999;--el-switch-on-color:#333"
              v-model="theme" inline-prompt :active-action-icon="Moon" :inactive-action-icon="Sunny" active-text="黑夜模式"
              inactive-text="白天模式">
              <!-- <template #active-action>
            <span class="custom-active-action">白</span>
          </template>
<template #inactive-action>
            <span class="custom-inactive-action">黑</span>
          </template> -->
            </el-switch>
            <!-- <el-button round icon="SwitchButton">安全退出</el-button> -->
            <el-dropdown>
              <span class="el-dropdown-link">
                <img class="avatar" :src="baseUrl + avatar" alt="">
                &nbsp;
                <strong>{{ username }}</strong>
                <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="a">
                    <div @click="logout">
                      <el-icon>
                        <SwitchButton />
                      </el-icon>
                      安全退出
                    </div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-space>
        </div>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup scoped>
import MenuView from "../components/MenuView"
import { Sunny, Moon } from '@element-plus/icons-vue'
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
const router = useRouter()
const theme = ref(JSON.parse(localStorage.getItem('theme') || 'false'))
const { username, avatar } = JSON.parse(localStorage.getItem('adminLoginInfo') || '{}')
const themeToggle = (value) => {
  const html = document.documentElement
  if (value) {
    html.className = 'dark'
  } else {
    html.className = ''
  }
  localStorage.setItem('theme', value)
}
onMounted(() => {
  const theme = JSON.parse(localStorage.getItem('theme') || 'false')
  themeToggle(theme)
})

const logout = () => {
  localStorage.removeItem('adminLoginInfo')
  router.replace('/login')
}

</script>

<style lang="scss">
.layout {
  height: 100vh;

  .aside {
    // background-color: #444;
    border-right: 1px solid #eee;

    .logo {
      width: 100%;
    }

    .logo-text {
      text-align: center;
      line-height: 60px;
      font-size: 28px;
    }
  }

  .el-header {
    border-bottom: 1px solid #eee;
    position: relative;

    .action-top {
      position: absolute;
      top: 15px;
      right: 10px;

      .el-dropdown-link {
        display: flex;
        align-items: center;
        cursor: pointer;

        &:hover {
          border: none;
          outline: none;
        }

        .avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
      }


    }

  }

  .el-main {
    // background: #EEE;
  }
}
</style>